<template>
  <div  style="padding: 20px">
    <el-breadcrumb separator="/" style="margin-bottom: 20px">
      <el-breadcrumb-item >当前位置：</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a >用户管理</a></el-breadcrumb-item>
    </el-breadcrumb>
    <div v-loading.lock="loading" style="z-index: 100"  element-loading-text="拼命加载中"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(255, 255, 255, 1)">
      <el-card style="margin-bottom: 10px">
        <el-input style="width:200px" v-model="queryParams.username" size="small" placeholder="请输入用户名" clearable></el-input>
        <el-input style="width:200px" v-model="queryParams.role" size="small" placeholder="请输入角色" clearable></el-input>
        <el-button type="primary" icon="el-icon-search" size="small" @click="getUser">查询</el-button>
      </el-card>
      <el-card style="min-height: 600px">
        <el-table
          :data="tableData"
          border
          style="width: 100%"  highlight-current-row :header-cell-style="headerCellStyle">
          <el-table-column prop="itemDescription" label="商品"></el-table-column>
          <el-table-column prop="createTime" label="订单创建时间"></el-table-column>
          <el-table-column prop="nickName" label="购买人"></el-table-column>
          <el-table-column label="订单状态" prop="status">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status==0">待支付</el-tag>
              <el-tag type="success" v-if="scope.row.status==4">已取消</el-tag>
              <el-tag type="info" v-if="scope.row.status==1">已支付，待收货</el-tag>
              <el-tag type="warning" v-if="scope.row.status==2">已收货,待评价</el-tag>
              <el-tag type="danger" v-if="scope.row.status==3">订单结束</el-tag>
            </template>
          </el-table-column>

<!--          <el-table-column-->
<!--            fixed="right"-->
<!--            label="操作"-->
<!--            width="300px"-->
<!--          >-->
<!--            <template slot-scope="scope">-->
<!--          -->
<!--            </template>-->
<!--          </el-table-column>-->
        </el-table>
        <!--        分页-->
        <div class="pagination-container" style="text-align: center">
          <el-pagination
            class="pagiantion"
            v-show="total>0"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParams.pageNum"
            :page-sizes="[3, 5, 10, 15]"
            :page-size="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-card>
    </div>

  </div>
</template>

<script>
import request from "../utils/request";
import {dev as globalConfig} from "../../config";
export default {
  data(){
    return{
      loading: true,
      title:'',
      //数据
      adddata:{},
      //规则
      userToken:localStorage.getItem("token"),
      token:'',
      ifshow:false,
      total:0,
      tableData:[{}],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      deleteid:'',
      ifdelete:false,
      roles:[],
    }
  },
  created() {
    this.getUser()
  },
  methods:{

    //清楚数据
    clear1(){
      this. adddata={}
    },

    //分页
    handleSizeChange(val){
      this.queryParams.pageSize = val;
      this.queryParams.pageNum = 1;
      this.getUser()
    },
    handleCurrentChange(val){
      this.queryParams.pageNum = val;
      this.getUser()
    },
    getUser(){
      let url='/order/getDatas'
      request.post(url,this.queryParams).then(resp=>{
        if (resp.code===200){
          this.tableData=resp.list
          this.total=resp.total
          this.loading=false
        }
      })

    },

    headerCellStyle(column) {
      return { backgroundColor: '#C7E3FF',color: '#1f2f3d' }
    },
  }
}
</script>

<style scoped>
>>> .el-dialog__header {
  background-color: #66b1ff;
}
</style>
